﻿<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Spa Land - Body & Massage Therapy HTML Template | Shopping cart </title>

    <!-- Stylesheets -->
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/responsive.css" rel="stylesheet">

    <!--Color Switcher Mockup-->
    <link href="/css/color-switcher-design.css" rel="stylesheet">

    <!--Color Themes-->
    <link id="theme-color-file" href="/css/color-themes/default-theme.css" rel="stylesheet">

    <!--Favicon-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon">
    <link rel="icon" href="/images/favicon.png" type="image/x-icon">

    <!-- Responsive -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--[if lt IE 9]>
    <script src="/https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
    <!--[if lt IE 9]>
    <script src="/js/respond.js"></script><![endif]-->
</head>

<body>
<div class="page-wrapper">

    <!-- Preloader -->
    <div class="preloader"></div>

    <!-- Main Header-->
    <header class="main-header header-style-three">

        <!--Header Top-->
        <div th:insert="~{header :: #header-top}"></div>
        <!-- End Header Top -->

        <!-- Header Lower -->
        <div class="header-lower">
            <div class="auto-container">
                <div th:insert="~{header :: #main-box}"></div>
            </div>
        </div>
        <!-- End Header Lower -->

        <!--Sticky Header-->
        <div th:insert="~{header :: #header-sticky}"></div>
        <!--End Sticky Header-->
    </header>
    <!--End Main Header -->

    <!--Page Title-->
    <section class="page-title" style="background-image:url(/images/background/13.jpg);">
        <div class="auto-container">
            <div class="inner-container clearfix">
                <h1>购物车</h1>
                <ul class="bread-crumb clearfix">
                    <li><a href="index.html">首页 </a></li>
                    <li>购物车</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->

    <!--Cart Section-->
    <section class="cart-section">
        <div class="auto-container">
            <!--Cart Outer-->
            <div class="cart-outer">
                <div class="table-outer">
                    <table class="cart-table">
                        <thead class="cart-header">
                        <tr>
                            <th>预览</th>
                            <th class="prod-column">产品名称</th>
                            <th class="price">价格</th>
                            <th>数量</th>
                            <th>总计</th>
                            <th>&nbsp;</th>
                        </tr>

                        </thead>

                        <tbody id="aaa">
                        <tr th:each="cart:${cartPageInfo.list}">
                            <td class="prod-column">

                                <div class="column-box">
                                    <figure class="prod-thumb"><a href="#"><img
                                            th:src="'http://47.94.10.67/images/' + ${cart.productImg}" alt=""></a></figure>
                                </div>
                            </td>
                            <td><h4 class="prod-title" th:text="${cart.productName}"></h4></td>
                            <td class="sub-total" id="productPrice" th:text="${cart.productPrice}"></td>
                            <td class="qty">
                                <div class="item-quantity">

                                    <span>
                                        <span style="cursor: pointer" id="add">+</span>
                                        <input type="hidden" th:value="${cart.id}" id="cartId">
                                        <input style="line-height: 28px; width: 100px; padding: 10px 15px !important; height: 50px !important; box-shadow: none !important; border: 1px solid #777777; text-align: center; font-size: 20px; color: #666666;" type="text" id="quantity" th:value="${cart.quantity}" name="quantity">
                                        <input type="hidden" th:value="${cart.productPrice}" id="productPrices">
                                        <span style="cursor: pointer" id="sub">-</span>
                                    </span>

                                </div>
                            </td>
                            <td class="total" th:text="${cart.productTotalPrice}"></td>
                            <td><a th:href="'/cart/deleteCart?cartId=' + ${cart.id}" class="remove-btn"><span
                                    class="fa fa-times"></span></a></td>
                        </tr>

                        </tbody>
                    </table>
                </div>

                <div class="cart-options clearfix">
                    <div class="pull-left">
                        <div class="apply-coupon clearfix">
                            <div class="form-group clearfix">
                                <input type="text" name="coupon-code" value="" placeholder="优惠卷码">
                            </div>
                            <div class="form-group clearfix">
                                <button type="button" class="theme-btn btn-style-two coupon-btn">使用优惠券</button>
                            </div>
                        </div>
                    </div>

                    <div class="pull-right">
                        <a type="button" href="/page/cart" class="theme-btn cart-btn btn-style-two">更新购物车</a>
                    </div>

                </div>

                <div class="row clearfix">

                    <div class="column pull-right col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <!--Totals Table-->
                        <ul class="totals-table">
                            <li><h3>购物车总计</h3></li>
                            <li class="clearfix total"><span class="col">小计</span><span class="col price" th:text="${totalPrice}"></span>
                            </li>
                            <li class="clearfix total"><span class="col">优惠金额</span><span class="col price">$0.00</span>
                            </li>
                            <li class="clearfix total"><span class="col">总计</span><span class="col price" th:text="${totalPrice}"></span>
                            </li>
                            <li class="text-right">
                                <button type="submit" onclick="checkOut()" class="theme-btn btn-style-two proceed-btn">进行结算</button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Cart Section-->
    <!-- Main Footer -->
    <div th:insert="~{footer :: #footer}"></div>
    <!-- End Main Footer -->

</div>
<!--End pagewrapper-->

<div class="color-palate">
    <div class="color-trigger">
        <i class="fa fa-gear"></i>
    </div>
    <div class="color-palate-head">
        <h6>选择一个你喜欢的主题</h6>
    </div>
    <div class="various-color clearfix">
        <div class="colors-list">
            <span class="palate default-color active" data-theme-file="/css/color-themes/default-theme.css"></span>
            <span class="palate teal-color" data-theme-file="/css/color-themes/teal-theme.css"></span>
            <span class="palate navy-color" data-theme-file="/css/color-themes/navy-theme.css"></span>
            <span class="palate yellow-color" data-theme-file="/css/color-themes/yellow-theme.css"></span>
            <span class="palate blue-color" data-theme-file="/css/color-themes/blue-theme.css"></span>
            <span class="palate purple-color" data-theme-file="/css/color-themes/purple-theme.css"></span>
            <span class="palate olive-color" data-theme-file="/css/color-themes/olive-theme.css"></span>
            <span class="palate red-color" data-theme-file="/css/color-themes/red-theme.css"></span>
        </div>
    </div>

    <div class="palate-foo">
        <span>你可以很简单的改变主体颜色</span>
    </div>

</div>
<!-- /.End Of Color Palate -->

<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!--End Revolution Slider-->
<script src="/js/jquery-ui.js"></script>
<script src="/js/jquery.fancybox.js"></script>
<!--<script src="/js/owl.js"></script>-->
<script src="/js/appear.js"></script>
<!--<script src="/js/wow.js"></script>-->
<script src="/js/mixitup.js"></script>
<script src="/js/jquery.bootstrap-touchspin.js"></script>
<!--<script src="/js/validate.js"></script>-->
<script src="/js/script.js"></script>
<!--Color Switcher-->
<script src="/js/color-settings.js"></script>
</body>
</html>
<script type="text/javascript">
    $(function () {
        var quantity;

        // // 点击鼠标加号增加产品数量
        $("#aaa").on('click',"#add", function (){
            quantity = $(this).nextAll("#quantity").val();

            var cartId = $(this).nextAll("#cartId").val();
            // alert(cartId);

             // alert(quantity)
            var a = parseInt(quantity) + 1
            // alert(a)
            // $(this).nextAll("#quantity").val(quantity)
            // alert(quantity);
            var productPrice = $(this).nextAll("#productPrices").val();
            // alert(productPrice);
            window.location.href = '/cart/addCartByQuantity?productId=' + cartId + '&quantity=' + a + '&productPrice=' + productPrice;
        });
        // 点击鼠标减号，减少产品数量
        $("#aaa").on('click',"#sub", function (){
            quantity = $(this).prevAll("#quantity").val() -1;
            if (quantity < 1) {
                return false;
            }
            var cartId = $(this).prevAll("#cartId").val();
            // alert(cartId);
            $(this).prevAll("#quantity").val(quantity)
            // alert(quantity);
            var productPrice = $(this).prevAll("#productPrices").val();
            // alert(productPrice);
            window.location.href = '/cart/addCartByQuantity?productId=' + cartId + '&quantity=' + quantity  + '&productPrice=' + productPrice;
        });

        // 鼠标移入移除更改数量
        $("#aaa").on('blur', '#quantity',function () {
            var cartId = $(this).prevAll("#cartId").val();
            // alert(cartId)
            quantity = $(this).val();
            $(this).val(quantity);
            var productPrice = $(this).nextAll("#productPrices").val();
            // alert(productPrice)

            window.location.href = '/cart/addCartByQuantity?productId=' + cartId + '&quantity=' + quantity + '&productPrice=' + productPrice;
        });

    })
</script>
<script type="text/javascript">
    function searchService() {
        var question = $("#q").val().trim();
        window.location.href = '/gallery/searchGallery?question=' + question;
    }
    function checkOut() {
        window.location.href = '/page/checkout'
    }
</script>